<template>
  <div class="user-info-card-wrapper">
    <div class="user-detail">
      <h2 class="user-name">{{ userInfos?.username || 'XXX' }}</h2>
      <h3 class="user-sign">{{ userInfos?.sign || 'SIGN HERE' }}</h3>
      <ul class="user-social-net">
        <li>
          <h4>{{ userInfos?.workNum || 0 }}</h4>
          <h3>作品</h3>
        </li>
        <li>
          <h4>{{ userInfos?.followedNum || 0 }}</h4>
          <h3>粉丝</h3>
        </li>
        <li>
          <h4>{{ userInfos?.followNum || 0 }}</h4>
          <h3>关注</h3>
        </li>
      </ul>
      <ul class="user-content">
        <li @click="open('/user/profile/article')">
          <i class="iconfont icon-person1"></i>
          <span>个人主页</span>
        </li>
        <li @click="open('/user/profile/following')">
          <i class="iconfont icon-follow1"></i>
          <span>我的关注</span>
        </li>
        <li @click="open('/creator/data/base')">
          <i class="iconfont icon-chuangzuozhezhongxin"></i>
          <span>创作中心</span>
        </li>
        <li @click="logout()">
          <i class="iconfont icon-logout1"></i>
          <span>退出登录</span>
        </li>
      </ul>
    </div>
    <img
      class="user-avatar"
      :src="userAvatarUrl"
      alt="Avatar"
      @click="$router.push({ name: 'userProfile' })"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { UserStateLogin, useUserStore } from '@/store/user'
import config from '@/config'
import { open } from '@/utils/link'

const userStore = useUserStore()
let userInfos = computed(() => {
  return (userStore.$state as UserStateLogin).info
})
let userAvatarUrl = computed(() => {
  return userInfos?.value?.avatar
    ? config.baseURL + userInfos.value.avatar
    : config.baseURL + config.defaultAssetUrls.avatar
})

function logout() {
  userStore.logout()
}
</script>

<style lang="scss" scoped>
@import 'style/shortcut';
@import 'style/config';

$w: 100%;
$h: 400px;
$ih: 40px;

.user-info-card-wrapper {
  position: absolute;
  top: 0;
  height: $th;
  width: $w;
  transition: 0.3s;

  .user-avatar {
    position: absolute;
    top: ($th - $ih) / 2;
    left: 50%;
    transform: translateX(-50%);
    width: $ih;
    height: $ih;
    border-radius: 50%;
    transition: 0.3s;

    &:hover {
      cursor: pointer;
    }
  }

  .user-detail {
    position: absolute;
    z-index: 0;
    top: ($th - $ih) / 2;
    right: 50%;
    transform: translateX(50%);

    width: 230px;
    padding: 1.5 * $ih 10px 10px;

    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px $light;

    opacity: 0;
    pointer-events: none;
    transition: 0.3s;

    .user-name,
    .user-sign {
      text-align: center;
    }

    .user-name {
      font-size: 23px;
    }

    .user-sign {
      font-size: 12px;
      line-height: 1.5;
      margin-bottom: 10px;
    }

    .user-social-net {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin-bottom: 12px;

      li h3,
      li h4 {
        text-align: center;
      }

      li h4 {
        font-size: 19px;
      }

      li h3 {
        font-size: 12px;
        line-height: 1.2;
        color: #aeaeae;
        font-weight: 400;
      }
    }

    .user-content {
      padding-top: 1px;

      li {
        margin: 8px 0;
        display: flex;
        justify-content: left;
        align-items: center;
        height: 32px;
        font-size: 14px;
        color: $dark;
        border-radius: 5px;

        &:hover {
          cursor: pointer;
          background-color: $light;
        }

        i {
          margin: 0 15px;
        }

        i:hover,
        span:hover {
          cursor: pointer;
        }
      }
    }
  }

  // &:hover
  &:hover {
    transform: translate(-10px, $ih * 0.8);

    .user-avatar {
      transform: scale(2) translateX(-25%);
    }

    .user-detail {
      opacity: 1;
      pointer-events: all;
    }
  }
}
</style>
